<template>
  <!-- {{ cascader }} -->
  <!-- <el-cascader
    v-model="cascader"
    :class="{ 'cascader-wrapper-style': isSelfStyle }"
    class="cascader-wrapper-style"
    :filterable="filterable"
    :clearable="clearable"
    :options="options"
    :props="{ ...cascaderProps, emitPath: formItem?.emitPath, checkStrictly: formItem?.checkStrictly }"
    :show-all-levels="false"
    collapse-tags
    :collapse="true"
    :debounce="500"
    :filter-method="filterMethod"
    @change="change"
    v-bind="$attrs"
  /> -->
  <!-- v-bind="$attrs" -->

  <el-cascader
    ref="contentRef"
    popper-class="popperStyle"
    :class="{ 'cascader-wrapper-style': isSelfStyle }"
    class="cascader-wrapper-style"
    v-model="cascader"
    :options="options"
    :props="cascaderProps"
    :show-all-levels="false"
    filterable
    clearable
    :debounce="500"
    :placeholder="props.placeholder"
    collapse-tags
    collapse-tags-tooltip
    :filter-method="filterMethod"
    @change="change"
    v-bind="$attrs"
  />
</template>
<script setup>
import { getPersonnelOpt, getDepartmentOpt, getCategoryOpt } from "./enum.js"
const emit = defineEmits(["update:modelValue", "change"])
const props = defineProps({
  type: { type: String, default: "personnel" },
  modelValue: [String, Number, Array],
  multiple: { type: Boolean, default: true }, // 多选模式
  filterable: { type: Boolean, default: true }, // 可搜索
  clearable: { type: Boolean, default: true }, // 可清空
  isSelfStyle: { type: Boolean, default: true },
  formItem: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
})
const { type } = toRefs(props)
const config = {
  personnel: {
    key: "personnel", // 人员
    id: "user_id",
    api: getPersonnelOpt,
  },
  department: {
    key: "department", // 部门
    api: getDepartmentOpt,
  },
  category: {
    key: "classify", // 分类
    children: "son",
    api: getCategoryOpt,
  },
}

const cascader = ref()
watch(
  () => props.modelValue,
  (val) => {
    cascader.value = val
  },
  { deep: true, immediate: true }
)

const item = config[type.value]
const { key } = item
const options = ref([])

const getData = () => {
  try {
    if (props.options[type.value]) {
      options.value = props.options[type.value]
    } else {
      item.api().then((data) => {
        options.value = data
      })
    }
  } catch (error) {
    console.log("error", error)
  }
}
// CeliaSun
getData()
const cascaderProps = computed(() => ({
  emitPath: false,
  multiple: props.multiple,
  label: "name",
  value: item.id || "id",
  // value: type.value == "personnel" ? (props.multiple ? "id" : "user_id") : item.id || "id",
  children: item.children || "sub",
}))
const filterMethod = (node, val) => {
  if (!!~node.text.indexOf(val) || !!~node.text.toUpperCase().indexOf(val.toUpperCase())) {
    return true
  }
}
const contentRef = ref()
const change = (values) => {
  emit("update:modelValue", values)
  if (props.multiple) {
    const getCheckedNodes = contentRef?.value.getCheckedNodes()
    if (type.value == "personnel") {
      let value = getCheckedNodes.filter((v) => values?.includes(v.value) && v.data.organization_type != 1)?.map((d) => d.value)
      const labels = getCheckedNodes.filter((v) => values?.includes(v.value) && v.data.organization_type != 1)?.map((d) => d.label)
      emit("change", { value, labels })
    } else {
      let value = getCheckedNodes.filter((v) => values?.includes(v.value))?.map((d) => d.value)
      const labels = getCheckedNodes.filter((v) => values?.includes(v.value))?.map((d) => d.label)
      emit("change", { value, labels })
    }
  } else {
    const getCheckedNodes = contentRef?.value.getCheckedNodes()
    let value = getCheckedNodes.filter((v) => v.value == values)?.map((d) => d.value)
    const labels = getCheckedNodes.filter((v) => v.value == values)?.map((d) => d.label)
    emit("change", { value, labels })
  }
}
</script>
<style lang="scss" scoped>
:deep(.cascader-wrapper-style) {
  .el-input__inner {
    max-height: 30px !important;
    overflow: hidden;
  }
  .el-tag__content {
    span {
      font-size: 12px !important;
    }
  }
  .el-cascader__tags {
    display: flex;
    flex-wrap: nowrap;
    z-index: 99;
    .el-tag--info {
      margin-left: 4px;
      padding: 0 2px 0 4px;

      .el-tag__close {
        margin-left: 2px;
      }
    }
    .el-tag--info.is-closable {
      flex: 1;
      max-width: 90px;
    }
    .el-cascader__search-input {
      min-width: 26px;
    }
  }
}
</style>
